<template>
  <div class="overview">
    <FhCard title="关于">
      <div class="my-left">
        <span
          >Vue3Admin 是基于 Vue3、Vuex、VueRouter、Vite、 ElementPlus
          、TypeScript、Echart5 等后台系统解决方案。</span
        >
      </div>
    </FhCard>
    <FhCard title="技术栈">
      <div class="tech-stacks my-left">
        <FhTextLink :textArr="techStacks"></FhTextLink>
        <FhDescript
          :tableDatas="produDescript"
          title="生产环境依赖"
        ></FhDescript>
        <FhDescript
          :tableDatas="developDescript"
          title="开发环境依赖"
        ></FhDescript>
      </div>
    </FhCard>
    <FhCard title="项目结构">
      <Fhcode :treeCode="projectTree"></Fhcode>
    </FhCard>
    <FhCard title="项目规范">
      <FhDescript
        :column="1"
        title="文件命名规范"
        :tableDatas="[
          { name: '文件夹', description: '统一小写, 多个单词使用-分割' },
          {
            name: '文件(.ts .vue .json .d.ts)',
            description: '统一小写, 多个单词使用-分割'
          }
        ]"
      ></FhDescript>
      <FhDescript
        :column="1"
        title="编写组件规范"
        :tableDatas="[
          { name: '组件的文件', description: '统一小写, 多个单词使用-分割' },
          {
            name: '组件的目录结构',
            description:
              '例如 button 组件：button/src/index.vue, 统一在button/index.ts导出'
          },
          {
            name: '组件导包顺序',
            description:
              '导vue技术栈的包 , 导第三方的工具函数 , 导本地的组件, 导本地的工具函数'
          },
          { name: '组件的名称', description: '统一大写开头，驼峰命名' },
          {
            name: '组件属性顺序',
            description: 'name, components, props, emits, setup ...'
          },
          {
            name: 'template标签',
            description: '小写加 - ( 例如：<case-panel/> )'
          },
          {
            name: 'template标签属性顺序',
            description: 'v-if , v-for , ref, class, style, ... ,事件'
          },
          {
            name: '组件的props',
            description: '小写开头，驼峰命名，必须编写类型默认值'
          },
          {
            name: '组件的样式',
            description:
              '作用域：scoped, lang = scss / less  ; 类名：统一小写, 多个单词使用-分割'
          }
        ]"
      ></FhDescript>
    </FhCard>
    <FhCard title="Git提交规范">
      <FhDescript
        :column="1"
        :tableDatas="[
          { name: 'add 操作', description: 'git add ' },
          { name: 'commit 操作', description: 'npm run commit ' },
          { name: 'pull 操作', description: 'git pull ' },
          { name: 'push 操作', description: 'git push ' }
        ]"
      >
      </FhDescript>
    </FhCard>
  </div>
</template>

<script setup lang="ts">
import FhCard from '@/base-ui/card'
import FhTextLink from '@/base-ui/text-link'
import FhDescript from '@/base-ui/descriptions'
import Fhcode from '@/base-ui/code'

import {
  techStacks,
  produDescript,
  developDescript,
  projectTree
} from './config'
</script>

<style lang="less" scoped>
.overview {
  .my-left {
    text-align: left;
  }
  .el-card {
    margin-bottom: 20px;
    &:deep(.card-header) {
      font-weight: 700;
    }
  }
}
</style>
